<template>
	<view class="news_list">
		<view class="header">
			<view class="md bold u-text-center u-padding-top-20 bg-white">
				错误码查询
			</view>
			<u-search placeholder="请输入关键字" v-model="keyword" hideRight @search="searchArticle" @custom="searchArticle"></u-search>
		</view>

		<view class="main">
			<view class="article-list">
				<view v-for="(item, index) in newsList" :key="index" :data-id="item.id" class="article-item bg-white"
					@tap="goPage">
					<view class="row">
						<view class="info">
							<view class="title lg line2 mb20">{{ item.title }}</view>
							<view class="lighter line2">
								<view>{{ item.synopsis }}</view>
							</view>
						</view>
						<image width="240rpx" height="180rpx" lazy-load class="img ml20" :src="item.image" />
					</view>
					<view class="row-between mt20">
						<view class="xs muted">发布时间: {{item.create_time}}</view>
						<view class="row">
							<image class="icon-sm" src="/static/images/icon_see.png"></image>
							<view class="ml10 xs muted">{{ item.visit }}人浏览</view>
						</view>
					</view>
				</view>
			</view>
			<loading-footer :status="status" slotEmpty>
				<view slot="empty" class="column-center" style="padding-top: 100rpx">
					<image class="img-null" src="/static/images/news_null.png"></image>
					<text class="nr muted">暂无数据～</text>
				</view>
			</loading-footer>
		</view>
	</view>
</template>

<script>
	import {
		getHelpArticleList,
		getErrorCodeList
	} from '@/api/new';
	import {
		loadingType
	} from '@/utils/type';
	import {
		loadingFun
	} from '@/utils/tools'
	export default {
		data() {
			return {
				type: 0,
				keyword: '',
				showLoading: true,
				newsList: [],
				page: 1,
				status: loadingType.LOADING
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			//分类id
			this.id = options.id; //type存在则为帮助中心
			this.type = options.type||0; //type存在则为帮助中心
			if(this.type == 1)this.keyword = options.keyword||'';
			this.getHelpArticleListFun();
		},

		onReachBottom: function() {
			this.getHelpArticleListFun();
		},


		methods: {
			searchArticle(){
				this.page = 1;
				console.log(1)
				this.newsList = [];
				this.status = loadingType.LOADING
				setTimeout(() => {
					this.getHelpArticleListFun();
				}, 100);
			},

			getHelpArticleListFun() {
				let {
					id,
					type,
					page,
					keyword,
					newsList,
					status
				} = this;
				
				let requestObject = getHelpArticleList;
				if(type == 1)requestObject = getErrorCodeList;
				let requestParameters = {
					keyword,
					page_no: page
				};
				
				if(type == 0){
					requestParameters['id'] = id
				}
				loadingFun(requestObject, page, newsList, status, requestParameters).then(res => {
					if (res) {
						this.page = res.page;
						this.newsList = res.dataList
						this.status = res.status
					}
				})
			},

			goPage(e) {
				let {
					id
				} = e.currentTarget.dataset;
				uni.navigateTo({
					url: `/pages/product/article/info?id=${id}`
				});
			}

		}
	}
</script>

<style lang="scss">
	.header {
		top: 0;
		position: sticky;
		z-index: 11;
		box-shadow: 1px 4px 10px #eee;
	}
	
	.news_list {
	    .banner {
	    
	    }
	    .main {        
	        .article-list {
	            padding-top: 20rpx;
	            .article-item {
	                padding: 20rpx;
	                border-bottom: var(--border);
	                align-items: flex-start;
	                .info {
	                    flex: 1;
	                }
	                .img {
	                    width: 240rpx;
	                    height: 180rpx;
	                    flex: none;
	                }
	            }
	            &:last-of-type {
	                border: none;
	            }
	        }
	    }
	    .footer {
	        padding: 30rpx 0;
	    }
	}
	
	page .van-tabs .van-tab--active {
	    color: #333;
	}
	
	
	.news_list .van-tab {
	    width: 25%;
	    flex: none;
	}
</style>